<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <head>
        <title>Create Team</title>
        <link href="css/global.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="js/global.js"></script>
        <link href="resources/DataTables-1.9.4/media/css/jquery.dataTables.css" rel="stylesheet" type="text/css"/>
        <script src="resources/DataTables-1.9.4/media/js/jquery.dataTables.js"/>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" type="text/css" />
        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
        <script>
            $(document).ready(function(){
                var userList = document.getElementById("userList").value;
                var array = userList.split(',');
                $("#form\\:addFriend").autocomplete({
                    source: array
                });
            });
            
        </script>
    </head>
    <h:body>
        <h:inputText id="userList" value="#{createLeagueBean.userList}" style="display: none"/>
        
        
    <div id="background">
    <div class="navy">
        
    </div>
        <div id="content">
            <div id="createLeagueContainer">
            <span class="whiteHeader">Create Your League</span><br/>
            <h:form id="form">
                <h:panelGrid columns="2">
                    <h:outputLabel for="leaguename"><span class="white">League Name: </span></h:outputLabel>
                    <h:inputText id="leaguename" value="#{createLeagueBean.leagueName}" />
                    <h:outputLabel for="leagueNote"><span class="white">League Note: </span></h:outputLabel>
                    <h:inputText id="leagueNote" value="#{createLeagueBean.leagueNote}" />
                    <h:outputLabel for="maxPlayer"><span class="white">Maximum Player: </span></h:outputLabel>
                    <h:selectOneMenu id="maxPlayer" value="#{createLeagueBean.maxUser}">
                        <f:selectItem itemValue="4" itemLabel="4"/>
                        <f:selectItem itemValue="5" itemLabel="5"/>
                        <f:selectItem itemValue="6" itemLabel="6"/>
                        <f:selectItem itemValue="7" itemLabel="7"/>
                        <f:selectItem itemValue="8" itemLabel="8"/>
                    </h:selectOneMenu>
                </h:panelGrid>
                <h:panelGrid columns="3">
                    <h:outputLabel for="invitedFriends"><span class="white">Invited Friends: </span></h:outputLabel>
                    <h:selectManyMenu id="invitedFriends" value="#{createLeagueBean.selectedFriend}" style="width:120px;">
                        <f:selectItems value="#{createLeagueBean.invitedList}" var="list" itemLabel="#{list}"/>
                    </h:selectManyMenu>
                    <h:commandButton id="removeBtn" value="Remove" styleClass="short" action="#{createLeagueBean.removeFriend}"/>
                    <h:outputLabel for="addFriend"><span class="white">Add Friend: </span></h:outputLabel>
                    <h:inputText id="addFriend" value="#{createLeagueBean.friendName}"/>
                    <h:commandButton id="addBtn" value="Add" styleClass="short" action="#{createLeagueBean.addFriend}"/>
                </h:panelGrid>
                
                <h:panelGrid columns="2">
                    <h:commandButton value="Submit" styleClass="short" action="#{createLeagueBean.createLeague}"/>
                    <h:commandButton value="Cancel" styleClass="short"/>
                </h:panelGrid>
            </h:form>
        </div>
        </div>
    </div>
    </h:body>
</html>
